<template>
  <view class="content">
    <rank-pop :is-show-rank="isShowRank"
              :rank-num="userInfo.userRankNum"></rank-pop>
    <bottom-nav current-index="1"
                :rank-num="userInfo.userRankNum"></bottom-nav>

    <image src="../../static/images/2.png"
           class="nav-bg"></image>

    <view class="slider-box">
      <swiper class="swiper"
              :autoplay="true"
              :interval="2000"
              @change="swiperChange">
        <swiper-item>
          <image src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596021319395&di=26b09e17fb762bc6a13c4d04c0d77227&imgtype=0&src=http%3A%2F%2Fnwzimg.wezhan.cn%2Fcontents%2Fsitefiles2024%2F10121834%2Fimages%2F6504289.jpg"
                 class="swiper-item"></image>
        </swiper-item>
        <swiper-item>
          <image src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596021348881&di=09e5c2f4d3389d9532df61b1c122dc8c&imgtype=0&src=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D1050006382%2C1222367191%26fm%3D214%26gp%3D0.jpg"
                 class="swiper-item"></image>
        </swiper-item>
        <swiper-item>
          <image src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596021319395&di=c24864d27fb38fa3d5d925ad10108bf9&imgtype=0&src=http%3A%2F%2Fwww.mxzx123.net%2Fuploads%2Fallimg%2F180628%2F7-1P62Q64920.jpg"
                 class="swiper-item"></image>
        </swiper-item>
      </swiper>
    </view>

    <view class="indicator-box">
      <view class="indicator-item-box">
        <view class="indicator-item"
              :class="{'indicator-item-active': swiperIndex1}"></view>
      </view>
      <view class="indicator-item-box">
        <view class="indicator-item"
              :class="{'indicator-item-active': swiperIndex2}"></view>
      </view>
      <view class="indicator-item-box">
        <view class="indicator-item"
              :class="{'indicator-item-active': swiperIndex3}"></view>
      </view>
    </view>

    <view class="divider"></view>

    <view class="nav-box">
      <view class="nav-item"
            @tap="tapNavItem"
            data-index="1">
        <view class="nav-icon">
          <image src="../../static/images/zyjc.png"></image>
        </view>
        <view class="nav-label">志愿检测</view>
      </view>
      <view class="nav-item"
            @tap="tapNavItem"
            data-index="2">
        <view class="nav-icon">
          <image src="../../static/images/zsjh.png"></image>
        </view>
        <view class="nav-label">招生计划</view>
      </view>
      <view class="nav-item"
            @tap="tapNavItem"
            data-index="3">
        <view class="nav-icon">
          <image src="../../static/images/lqfs.png"></image>
        </view>
        <view class="nav-label">录取分数</view>
      </view>
      <view class="nav-item"
            @tap="tapNavItem"
            data-index="4">
        <view class="nav-icon">
          <image src="../../static/images/khsx.png"></image>
        </view>
        <view class="nav-label">考后实习</view>
      </view>
    </view>

    <view class="nav-box">
      <view class="nav-item"
            @tap="tapNavItem"
            data-index="5">
        <view class="nav-icon">
          <image src="../../static/images/zdx.png"></image>
        </view>
        <view class="nav-label">找大学</view>
      </view>
      <view class="nav-item"
            @tap="tapNavItem"
            data-index="6">
        <view class="nav-icon">
          <image src="../../static/images/czy.png"></image>
        </view>
        <view class="nav-label">查专业</view>
      </view>
      <view class="nav-item"
            @tap="tapNavItem"
            data-index="7">
        <view class="nav-icon">
          <image src="../../static/images/zbzl.png"></image>
        </view>
        <view class="nav-label">招办直朕</view>
      </view>
      <view class="nav-item"
            @tap="tapNavItem"
            data-index="8">
        <view class="nav-icon">
          <image src="../../static/images/wccx.png"></image>
        </view>
        <view class="nav-label">位次查询</view>
      </view>
    </view>

    <view class="enroll-btn"
          @tap="tapEnroll">我要上大学</view>

    <view class="volunteer">
      <view class="volunteer-left">第一志愿填报时间：</view>
      <view class="volunteer-right">7月25——8月5号</view>
    </view>

    <view class="divider"></view>

    <view class="school-list-box">

      <view class="list-title-box">
        <view class="list-title-item"
              @tap="changeSchoolType"
              data-index="0">
          <view class="list-title-label"
                :class="{'list-title-label-active': isShowList[0]}">省内优秀高校</view>
          <view class="list-title-line"
                :class="{'list-title-line-active': isShowList[0]}"></view>
        </view>
        <view class="list-title-item"
              @tap="changeSchoolType"
              data-index="1">
          <view class="list-title-label"
                :class="{'list-title-label-active': isShowList[1]}">省外优秀高校</view>
          <view class="list-title-line"
                :class="{'list-title-line-active': isShowList[1]}"></view>
        </view>
      </view>

      <view class="list-box"
            v-show="isShowList[0]">
        <view class="list-item"
              v-for="item in schoolList1"
              :key="item.universityId"
              @click="goSchoolDetail(item.universityId)">
          <image class="school-img"
                 :src="staticUrl+item.universityBannerImage[0]"></image>
          <view class="op-bg"></view>
          <view class="school-name">{{item.universityName}}</view>
        </view>
      </view>
      <view class="list-box"
            v-show="isShowList[1]">
        <view class="list-item"
              v-for="item in schoolList2"
              :key="item.universityId"
              @tap="goSchoolDetail(item.universityId)">
          <image class="school-img"
                 :src="staticUrl+item.universityBannerImage[0]"></image>
          <view class="op-bg"></view>
          <view class="school-name">{{item.universityName}}</view>
        </view>
      </view>

    </view>

    <view class="pop-bg"
          v-show="isShowIntership"></view>
    <view class="internship-pop-box"
          @tap="hideInternship"
          v-show="isShowIntership">
      <view class="internship-pop-content">
        <view class="internship-pop-item-box">
          <view class="internship-pop-item"
                @tap.stop="tapInternshipItem"
                :class="{'internship-pop-item-active': internshipItem[0]}"
                data-index="0">单独招生</view>
          <view class="internship-pop-item"
                @tap.stop="tapInternshipItem"
                :class="{'internship-pop-item-active': internshipItem[1]}"
                data-index="1">普通招生</view>
        </view>
        <view class="internship-submit-btn"
              @tap="goInternship">确定</view>
      </view>
    </view>

  </view>
</template>

<script>
import rankPop from '../../components/rank_pop.vue'
import bottomNav from '../../components/bottom_nav.vue'
import { myRequest, http, staticUrl } from '../../utils'

export default {
  data () {
    return {
      curIndex: 0,
      internshipIndex: 0,
      internshipItem: [true, false],
      isShowIntership: false,
      isShowRank: false,
      swiperIndex1: true,
      swiperIndex2: false,
      swiperIndex3: false,
      schoolList1: [],
      schoolList2: [],
      isShowList: [true, false],
      goUrlType: 1, // 1招办直联 2我要上大学
      userInfo: {},
      staticUrl: staticUrl
    }
  },

  components: {
    bottomNav,
    rankPop
  },

  onLoad () {
    this.userInfo = uni.getStorageSync('userInfo')
    this.fetchUniversityList()
  },

  methods: {

    swiperChange (e) {
      let that = this
      switch (e.detail.current) {
        case 0:
          that.swiperIndex1 = true
          that.swiperIndex2 = false
          that.swiperIndex3 = false
          break
        case 1:
          that.swiperIndex2 = true
          that.swiperIndex1 = false
          that.swiperIndex3 = false
          break
        case 2:
          that.swiperIndex3 = true
          that.swiperIndex1 = false
          that.swiperIndex2 = false
          break
      }
    },

    showRank () {
      this.isShowRank = true
    },

    hideRank () {
      this.isShowRank = false
    },

    showInternship () {
      this.isShowIntership = true
    },

    hideInternship () {
      this.isShowIntership = false
    },

    changeSchoolType (e) {
      this.isShowList[this.curIndex] = false
      this.curIndex = e.currentTarget.dataset.index
      this.isShowList[this.curIndex] = true
    },

    tapInternshipItem (e) {
      this.internshipItem[this.internshipIndex] = false
      this.internshipIndex = e.currentTarget.dataset.index
      this.internshipItem[this.internshipIndex] = true
    },

    tapNavItem (e) {
      let index = e.currentTarget.dataset.index
      switch (index) {
        case '1':
          uni.navigateTo({
            url: '/pages/volunteer_test/volunteer_test'
          })
          break
        case '2':
          uni.navigateTo({
            url: '/pages/enrollment_plan/enrollment_plan'
          })
          break
        case '3':
          uni.navigateTo({
            url: '/pages/admission_data/search_university'
          })
          break
        case '4':
          uni.navigateTo({
            url: '/pages/internship/internship'
          })
          break
        case '5':
          uni.navigateTo({
            url: '/pages/search_university/search_university'
          })
          break
        case '6':
          uni.navigateTo({
            url: '/pages/major_list/major_list'
          })
          break
        case '7':
          this.goUrlType = 1
          this.showInternship()
          break
        case '8':
          uni.navigateTo({
            url: '/pages/search_rank/search_rank'
          })
          break
        default:
          break
      }
    },

    goInternship () {

      if (this.userInfo.userIsExamination == 1) { // 高考结束
        if (this.goUrlType == 1) { // 招办直联
          if (this.userInfo.userIsPay != 1) { // 未付款
            uni.navigateTo({
              url: '/pages/pay_deposit/pay_deposit'
            })
            return
          }
        }
        if (this.userInfo.userIsTest == 1) { // 已进行意向测试
          if (this.userInfo.userIsMatch == 1) {
            uni.navigateTo({
              url: '/pages/matching_university/matching_university?t=' + this.goUrlType
            })
          } else {
            uni.navigateTo({
              url: '/pages/input_result_major/input_result_major?t=' + this.goUrlType
            })
          }
        } else { // 没有进行意向测试
          uni.navigateTo({
            url: '/pages/intention_test/intention_test?t=' + this.goUrlType
          })
        }
      } else { // 高考前
        if (this.userInfo.userIsTest == 1) { // 已进行意向测试
          if (this.userInfo.userIsMatch == 1) {
            uni.navigateTo({
              url: '/pages/matching_university/matching_university?t=2'
            })
          } else {
            uni.navigateTo({
              url: '/pages/input_result_major/input_result_major?t=2'
            })
          }
        } else { // 没有进行意向测试
          uni.navigateTo({
            url: '/pages/intention_test/intention_test?t=2'
          })
        }
      }

    },

    tapEnroll () {
      this.goUrlType = 2
      this.showInternship()
    },
    fetchUniversityList () {
      const that = this
      // uni.showLoading({
      //   title: '数据加载中...',
      //   mask: true,
      // });
      http(
        '/my-university/list',
        {}, {
        hideLoading: false,
        hideMsg: true,
        method: 'POST'
      }).then(
        res => {
          that.schoolList1 = res.data.data.list
          //uni.hideLoading();
        }).catch(
          err => {
            console.error(err)
          })

      http(
        '/my-university/olist',
        {}, {
        hideLoading: false,
        hideMsg: true,
        method: 'POST'
      }).then(
        res => {
          that.schoolList2 = res.data.data.list
        }).catch(
          err => {
            console.error(err)
          })
    },
    goSchoolDetail (id) {
      uni.navigateTo({
        url: '/pages/university_detail/university_detail?id=' + id
      })
    }

  }
}
</script>
<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
}

.nav-bg {
  position: absolute;
  width: 100%;
  height: 200rpx;
}

.slider-box {
  width: 680rpx;
  height: 250rpx;
  border-radius: 30rpx;
  overflow: hidden;
  margin-top: 20rpx;
}

.swiper-item {
  width: 680rpx;
  height: 250rpx;
  border-radius: 30rpx;
}

.indicator-box {
  display: flex;
  margin-top: 20rpx;
}

.indicator-item-box {
  width: 30rpx;
  display: flex;
  justify-content: center;
}

.indicator-item {
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  background-color: #eeeeee;
}

.indicator-item-active {
  width: 30rpx;
  height: 12rpx;
  border-radius: 30rpx;
  background-color: #99b5f8;
}

.divider {
  width: 100%;
  height: 18rpx;
  background-color: #eeeeee;
  margin-top: 20rpx;
}

.nav-box {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  margin-top: 40rpx;
}

.nav-item {
  width: 122rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nav-icon {
  width: 110rpx;
  height: 110rpx;
  border-radius: 50%;
  overflow: hidden;
}

.nav-icon image {
  width: 110rpx;
  height: 110rpx;
}

.nav-label {
  font-size: 24rpx;
  margin-top: 10rpx;
}

.enroll-btn {
  width: 702rpx;
  height: 114rpx;
  background-color: #fa2138;
  border-radius: 57rpx;
  font-size: 44rpx;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50rpx;
  font-weight: bold;
}

.volunteer {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50rpx;
  margin-bottom: 30rpx;
  font-weight: bold;
}

.volunteer-left {
  color: #666666;
  font-size: 30rpx;
}

.volunteer-right {
  color: #5683ec;
  font-size: 36rpx;
}

.list-title-box {
  display: flex;
  margin-top: 30rpx;
  align-items: center;
}

.list-title-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 40rpx;
}

.list-title-label {
  color: #999999;
  font-size: 24rpx;
}

.list-title-label-active {
  font-size: 30rpx;
  color: #333333;
}

.list-title-line {
  width: 140rpx;
  height: 4rpx;
  margin-top: 20rpx;
}

.list-title-line-active {
  background-color: #f40d29;
}

.list-box {
  width: 100%;
  margin-top: 30rpx;
}

.list-item {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20rpx;
}

.school-list-box {
  width: 702rpx;
  margin-bottom: 110rpx;
}

.school-img {
  width: 100%;
  height: 246rpx;
  border-radius: 30rpx;
}

.school-name {
  position: absolute;
  color: #ffffff;
  font-weight: bold;
  font-size: 60rpx;
}

.op-bg {
  width: 100%;
  height: 246rpx;
  position: absolute;
  background-color: #ffffff;
  opacity: 0.4;
}

.pop-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 100;
  background-color: #000000;
  opacity: 0.5;
}

.internship-pop-box {
  width: 750rpx;
  height: 100%;
  position: absolute;
  z-index: 101;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.internship-pop-content {
  width: 702rpx;
  height: 418rpx;
  background-color: #ffffff;
  border-radius: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.internship-pop-item-box {
  width: 600rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 100rpx;
}

.internship-pop-item {
  width: 278rpx;
  height: 88rpx;
  border-radius: 20rpx;
  border: solid 2rpx #999999;
  font-size: 36rpx;
  color: #666666;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.internship-pop-item-active {
  border-color: #5683ec !important;
  color: #5683ec !important;
}

.internship-submit-btn {
  width: 606rpx;
  height: 76rpx;
  background-color: #5683ec;
  border-radius: 38rpx;
  font-size: 36rpx;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 60rpx;
}
</style>
